<template>
  <div>
    <p>
      已完成的任务数量：{{ list.filter((item) => item.done === true).length }}
    </p>
    <p>未完成的任务的数量：{{ num }}</p>
    全选：<input type="checkbox" v-model="all">
    <ul>
      <li v-for="item in list" :key="item.id"><input type="checkbox" v-model="item.done">{{item.name}}</li>
    </ul>
  </div>
</template>

<script>
// 计算属性:可以简化视图中复杂的插值表达式 计算属性不是下面的那个方法，而是那个方法的返回值
// 计算属性和方法的一个区别 方法可以写小括号也可以不写，但是计算属性不能写，写了就报错
export default {
  data() {
    return {
      list: [
        { id: 1, name: "吃饭", done: true },
        { id: 2, name: "睡觉", done: false },
        { id: 3, name: "打豆豆", done: false },
      ],
    };
  },
  computed: {
    num() {
      return this.list.filter((item) => item.done === false).length;
    },
    all:{
      get(){
        return this.list.every(item=>item.done===true)
      },
      set(value){
        this.list.forEach(item=>item.done=value)
      }
    }
    /* all(){
      return this.list.every(item=>item.done===true)
    } */
  },
};
</script>

<style scoped></style>
